"use client";

import { Handle, Position } from "@xyflow/react";
import { memo } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "../ui/button";

interface ModelNodeData {
  taskName: string;
  chosenModel: string;
}

const ModelNode = memo(({ data }: { data: ModelNodeData }) => {
  return (
    <Card style={{ width: 300 }}>
      <Handle type="target" position={Position.Left} />
      <CardHeader>
        <CardTitle>{data.taskName}</CardTitle>
      </CardHeader>
      <CardContent>
        <Button size="lg" className="w-full text-lg">
          {data.chosenModel}
        </Button>
      </CardContent>
      <Handle type="source" position={Position.Right} />
    </Card>
  );
});

ModelNode.displayName = "ModelNode";

export default ModelNode;
